<template>
    <div class="character-detail-page">
        <van-nav-bar title="Character Details" left-text="Back" left-arrow @click-left="$router.back()" />

        <div v-if="character" class="character-content">
            <!-- Character Header -->
            <div class="character-header">
                <div class="character-avatar">
                    <img :src="character.avatar" :alt="character.name" />
                </div>
                <div class="character-info">
                    <h1 class="character-name">{{ character.name }}</h1>
                    <div class="character-role">{{ character.role }}</div>
                    <div class="character-tags">
                        <van-tag v-for="tag in character.tags" :key="tag" type="primary" plain>
                            {{ tag }}
                        </van-tag>
                    </div>
                </div>
            </div>

            <!-- Character Stats -->
            <div class="character-stats">
                <div class="stat-item">
                    <van-icon name="play-circle-o" />
                    <div class="stat-info">
                        <div class="stat-number">{{ character.interactions }}</div>
                        <div class="stat-label">Interactions</div>
                    </div>
                </div>
                <div class="stat-item">
                    <van-icon name="star-o" />
                    <div class="stat-info">
                        <div class="stat-number">{{ character.rating }}</div>
                        <div class="stat-label">Rating</div>
                    </div>
                </div>
                <div class="stat-item">
                    <van-icon name="medal-o" />
                    <div class="stat-info">
                        <div class="stat-number">{{ character.difficulty }}</div>
                        <div class="stat-label">Level</div>
                    </div>
                </div>
            </div>

            <!-- Character Description -->
            <div class="character-description">
                <h3>About {{ character.name }}</h3>
                <p>{{ character.description }}</p>
            </div>

            <!-- Personality Traits -->
            <div class="personality-section">
                <h3>Personality Traits</h3>
                <div class="traits-list">
                    <div v-for="trait in character.personality" :key="trait.name" class="trait-item">
                        <div class="trait-header">
                            <span class="trait-name">{{ trait.name }}</span>
                            <div class="trait-level">
                                <van-rate v-model="trait.level" :count="5" :size="16" readonly color="#ffd21e" />
                            </div>
                        </div>
                        <div class="trait-description">{{ trait.description }}</div>
                    </div>
                </div>
            </div>

            <!-- Communication Style -->
            <div class="communication-section">
                <h3>Communication Style</h3>
                <div class="communication-content">
                    <div class="communication-item">
                        <van-icon name="chat-o" />
                        <div class="communication-info">
                            <div class="communication-title">Speaking Style</div>
                            <div class="communication-desc">{{ character.speakingStyle }}</div>
                        </div>
                    </div>
                    <div class="communication-item">
                        <van-icon name="volume-o" />
                        <div class="communication-info">
                            <div class="communication-title">Tone</div>
                            <div class="communication-desc">{{ character.tone }}</div>
                        </div>
                    </div>
                    <div class="communication-item">
                        <van-icon name="clock-o" />
                        <div class="communication-info">
                            <div class="communication-title">Response Speed</div>
                            <div class="communication-desc">{{ character.responseSpeed }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Best Scenarios -->
            <div class="scenarios-section">
                <h3>Best Training Scenarios</h3>
                <div class="scenarios-list">
                    <div v-for="scenario in character.bestScenarios" :key="scenario.id" class="scenario-item"
                        @click="viewScenario(scenario.id)">
                        <div class="scenario-info">
                            <div class="scenario-title">{{ scenario.title }}</div>
                            <div class="scenario-desc">{{ scenario.description }}</div>
                        </div>
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>

            <!-- Sample Conversation -->
            <div class="sample-conversation">
                <h3>Sample Conversation</h3>
                <div class="conversation-preview">
                    <div v-for="message in character.sampleConversation" :key="message.id" class="message"
                        :class="{ 'user-message': message.isUser }">
                        <div class="message-avatar">
                            <img :src="message.isUser ? '/api/placeholder/40/40' : character.avatar"
                                :alt="message.isUser ? 'You' : character.name" />
                        </div>
                        <div class="message-content">
                            <div class="message-text">{{ message.text }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="action-buttons">
                <van-button type="primary" size="large" block @click="startTraining">
                    Start Training with {{ character.name }}
                </van-button>
                <van-button type="default" size="large" block @click="addToFavorites">
                    <van-icon name="star-o" />
                    Add to Favorites
                </van-button>
            </div>
        </div>

        <div v-else class="loading-state">
            <van-loading size="24px" vertical>Loading character...</van-loading>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()

interface Character {
    id: string
    name: string
    role: string
    avatar: string
    tags: string[]
    interactions: number
    rating: number
    difficulty: string
    description: string
    personality: Array<{
        name: string
        level: number
        description: string
    }>
    speakingStyle: string
    tone: string
    responseSpeed: string
    bestScenarios: Array<{
        id: string
        title: string
        description: string
    }>
    sampleConversation: Array<{
        id: number
        text: string
        isUser: boolean
    }>
}

const character = ref<Character | null>(null)

// Mock character data
const mockCharacters: Record<string, Character> = {
    '1': {
        id: '1',
        name: 'Sarah Chen',
        role: 'Senior Software Engineer & Tech Lead',
        avatar: '/api/placeholder/120/120',
        tags: ['Technical', 'Experienced', 'Friendly'],
        interactions: 2341,
        rating: 4.9,
        difficulty: 'Intermediate',
        description: 'Sarah is a seasoned software engineer with 8 years of experience. She conducts technical interviews and mentors junior developers. Known for her patient teaching style and thorough technical assessments.',
        personality: [
            {
                name: 'Friendliness',
                level: 4,
                description: 'Warm and approachable, puts candidates at ease'
            },
            {
                name: 'Technical Depth',
                level: 5,
                description: 'Asks detailed technical questions and follows up'
            },
            {
                name: 'Patience',
                level: 5,
                description: 'Gives time to think and explains concepts clearly'
            },
            {
                name: 'Directness',
                level: 3,
                description: 'Balanced approach, not too direct or indirect'
            }
        ],
        speakingStyle: 'Clear and methodical, uses technical terminology appropriately',
        tone: 'Professional yet friendly, encouraging',
        responseSpeed: 'Thoughtful pauses, allows time for reflection',
        bestScenarios: [
            {
                id: '1',
                title: 'Technical Interview - Software Developer',
                description: 'Perfect for practicing coding questions and system design'
            },
            {
                id: '2',
                title: 'Code Review Discussion',
                description: 'Great for learning how to give and receive feedback'
            }
        ],
        sampleConversation: [
            {
                id: 1,
                text: "Hi! I'm Sarah, and I'll be conducting your interview today. How are you feeling?",
                isUser: false
            },
            {
                id: 2,
                text: "I'm doing well, thank you! A bit nervous but excited for the opportunity.",
                isUser: true
            },
            {
                id: 3,
                text: "That's completely normal! Let's start with you telling me about a recent project you're proud of.",
                isUser: false
            }
        ]
    },
    '2': {
        id: '2',
        name: 'Marcus Johnson',
        role: 'Networking Professional & Event Host',
        avatar: '/api/placeholder/120/120',
        tags: ['Social', 'Outgoing', 'Professional'],
        interactions: 1876,
        rating: 4.7,
        difficulty: 'Beginner',
        description: 'Marcus is a charismatic networking professional who hosts industry events. He excels at making connections and helping others feel comfortable in social settings.',
        personality: [
            {
                name: 'Extroversion',
                level: 5,
                description: 'Very outgoing and energetic in conversations'
            },
            {
                name: 'Empathy',
                level: 4,
                description: 'Good at reading social cues and adapting'
            },
            {
                name: 'Enthusiasm',
                level: 5,
                description: 'Shows genuine interest in meeting new people'
            },
            {
                name: 'Professionalism',
                level: 4,
                description: 'Maintains appropriate boundaries while being friendly'
            }
        ],
        speakingStyle: 'Conversational and engaging, asks open-ended questions',
        tone: 'Upbeat and welcoming, makes others feel included',
        responseSpeed: 'Quick responses, keeps conversation flowing',
        bestScenarios: [
            {
                id: '3',
                title: 'Networking Event Conversation',
                description: 'Perfect for practicing small talk and professional networking'
            },
            {
                id: '4',
                title: 'Conference Mixer',
                description: 'Great for learning how to approach strangers confidently'
            }
        ],
        sampleConversation: [
            {
                id: 1,
                text: "Hey there! I don't think we've met. I'm Marcus - great to see a new face at the event!",
                isUser: false
            },
            {
                id: 2,
                text: "Hi Marcus! I'm new here. This is actually my first networking event.",
                isUser: true
            },
            {
                id: 3,
                text: "That's awesome! First times can be exciting. What brings you to the tech meetup tonight?",
                isUser: false
            }
        ]
    }
}

const viewScenario = (scenarioId: string) => {
    router.push(`/training/scenario/${scenarioId}`)
}

const startTraining = () => {
    if (character.value) {
        router.push({
            name: 'CharacterSelect',
            query: { characterId: character.value.id }
        })
    }
}

const addToFavorites = () => {
    showToast('Added to favorites!')
}

onMounted(() => {
    const characterId = route.params.characterId as string
    character.value = mockCharacters[characterId] || null

    if (!character.value) {
        showToast('Character not found')
        router.back()
    }
})
</script>

<style lang="scss" scoped>
.character-detail-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.character-content {
    padding: 16px;
}

.character-header {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    text-align: center;

    .character-avatar {
        width: 120px;
        height: 120px;
        border-radius: 60px;
        overflow: hidden;
        margin: 0 auto 16px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .character-name {
        font-size: 24px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 8px 0;
    }

    .character-role {
        font-size: 16px;
        color: #646566;
        margin-bottom: 12px;
    }

    .character-tags {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
}

.character-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;

    .stat-item {
        background: white;
        border-radius: 12px;
        padding: 16px;
        text-align: center;

        .van-icon {
            font-size: 24px;
            color: #1989fa;
            margin-bottom: 8px;
        }

        .stat-number {
            font-size: 20px;
            font-weight: 600;
            color: #323233;
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 12px;
            color: #969799;
        }
    }
}

.character-description,
.personality-section,
.communication-section,
.scenarios-section,
.sample-conversation {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;

    h3 {
        font-size: 18px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 16px 0;
    }

    p {
        font-size: 16px;
        color: #646566;
        line-height: 1.5;
        margin: 0;
    }
}

.traits-list {
    .trait-item {
        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }

        .trait-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;

            .trait-name {
                font-size: 16px;
                font-weight: 500;
                color: #323233;
            }
        }

        .trait-description {
            font-size: 14px;
            color: #646566;
        }
    }
}

.communication-content {
    .communication-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }

        .van-icon {
            font-size: 20px;
            color: #1989fa;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .communication-info {
            flex: 1;

            .communication-title {
                font-size: 16px;
                font-weight: 500;
                color: #323233;
                margin-bottom: 4px;
            }

            .communication-desc {
                font-size: 14px;
                color: #646566;
            }
        }
    }
}

.scenarios-list {
    .scenario-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #f5f5f5;
        cursor: pointer;

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background: #f8f9fa;
            margin: 0 -20px;
            padding: 12px 20px;
            border-radius: 8px;
        }

        .scenario-info {
            flex: 1;

            .scenario-title {
                font-size: 16px;
                font-weight: 500;
                color: #323233;
                margin-bottom: 4px;
            }

            .scenario-desc {
                font-size: 14px;
                color: #646566;
            }
        }

        .van-icon {
            color: #c8c9cc;
        }
    }
}

.conversation-preview {
    .message {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }

        &.user-message {
            flex-direction: row-reverse;

            .message-content {
                background: #1989fa;
                color: white;
            }
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            overflow: hidden;
            flex-shrink: 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .message-content {
            background: #f5f5f5;
            border-radius: 16px;
            padding: 12px 16px;
            max-width: 70%;

            .message-text {
                font-size: 14px;
                line-height: 1.4;
            }
        }
    }
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
</style>